<template>
  <breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
  <!-- 外壳 -->
	<div class="overview-wrapped">
    <!-- 1. 顶部内容外壳 top-content-wrapped-->
		<div class="top-content-wrapped">
      <!-- 1-1 个人信息 -->
			<div class="person-info">
        <!-- 1-1-1 用户头像外壳 -->
				<div class="person-avatar-wrapped">
          <el-avatar :size="100" :src="userData.image_url" />
					<span class="department">所属部门：{{userData.department ? userData.department : '实习生'}}</span>
					<div class="company">所属公司：{{ companyName }}</div>
        </div>
        <!-- 1-1-2 竖线 -->
				<div class="line-wrapped">
					<div class="line"></div>
				</div>
				<!-- 1-1-3 详细信息外壳 -->
				<div class="detail-info-wrapped">
          <p>姓名：{{userData.name}}</p>
					<p>性别：{{userData.sex}}</p>
					<p>身份：{{userData.identity}}</p> 
					<p>权限：{{userData.id > 21 ? 'admin' : 'superAdmin'}}</p>
        </div>
      </div>
      <!-- 1-2 管理与用户对比图扇形图 第一个类用于创建图例，第二个类修改样式 -->
      <div class="manage-user pie"></div>
    </div>

    <!-- 2. 中间内容外壳 mid-content-wrapped -->
		<div class="mid-content-wrapped">
      <!-- 2-1 产品类别库存总计图 柱形图 -->
      <div class="product-category-bar mid-content-left"></div>

      <!-- 2-2 常用管理（用户管理、产品管理...）快捷入口 -->
			<div class="mid-content-right">
        <div class="title">常用管理</div>
				<el-row :gutter="20">
					<!-- 2-2-1 用户管理 -->
          <el-col :span="6">
						<div class="button-area" @click="routerTo('users_manage')">
							<SvgIcon icon-name="user" style="width: 24px;height: 24px;"></SvgIcon>
							<span class="button-name">用户管理</span>
						</div>
					</el-col>
					<!-- 2-2-2 产品管理 -->
          <el-col :span="6">
						<div class="button-area" @click="routerTo('product_manage_list')">
							<SvgIcon icon-name="product" style="width: 24px;height: 24px;"></SvgIcon>
							<span class="button-name">产品管理</span>
						</div>
					</el-col>
					<!-- 2-2-3 系统消息 -->
					<el-col :span="6">
						<div class="button-area" @click="routerTo('message_list')">
							<SvgIcon icon-name="notice" style="width: 24px;height: 24px;"></SvgIcon>
							<span class="button-name">系统消息</span>
						</div>
					</el-col>
					<!-- 2-2-4 个人信息 -->
					<el-col :span="6">
						<div class="button-area" @click="routerTo('setting')">
							<SvgIcon icon-name="me" style="width: 24px;height: 24px;"></SvgIcon>
							<span class="button-name">个人信息</span>
						</div>
					</el-col>
					<!-- 2-2-5 部门信息 -->
					<el-col :span="6">
						<div class="button-area" @click="routerTo('operation_log')">
							<SvgIcon icon-name="message" style="width: 24px;height: 24px;"></SvgIcon>
							<span class="button-name">操作日志</span>
						</div>
					</el-col>
					<!-- 2-2-6 系统设置 -->
					<el-col :span="6">
						<div class="button-area" @click="routerTo('setting')">
							<SvgIcon icon-name="setting" style="width: 24px;height: 24px;"></SvgIcon>
							<span class="button-name">系统设置</span>
						</div>
					</el-col>
        </el-row>
      </div>
    </div>

    <!-- 3. 底部内容外壳 footer-content-wrapped -->
		<div class="footer-content-wrapped">
      <!-- 3-1 公告等级分布图 扇形图 -->
			<div class="massage-level footer-content-left"></div>
      <!-- 3-2 每日登录人数图 折线图 -->
			<div class="userlogin-week footer-content-right"></div>
		</div>

  </div>
</template>
 
<script setup lang="ts">
  import { ref, onMounted, reactive, } from 'vue';
  import breadCrumb from '@/components/bread_crumb.vue'; 
  import SvgIcon from '@/components/SvgIcon.vue';
  import { useRouter } from 'vue-router';
  import * as echarts from 'echarts';
	import { getUserInfo } from '@/api/userinfor.js'; // 获取个人信息（这里就有头像了）
  import { getCompanyName } from '@/api/setting.js';  // 公司信息
	// 补充真实数据
	import { getCategoryAndNumber, getAdminAndNumber, getLevelAndNumber, getDayAndNumber } from '@/api/overview.js';

  const breadcrumb = ref() // 面包屑
	const item = ref({       // 面包屑参数
		first: '系统概览',
	})

  const getUserinfo = async () => {
		let id = localStorage.getItem('id')
		const res = await getUserInfo(id)
    // console.log(res.data);
		userData.name = res.data.name
		userData.sex = res.data.sex
		userData.identity = res.data.identity
		userData.department = res.data.department
    userData.id = res.data.id
    userData.image_url = res.data.image_url
	}
  getUserinfo()

  interface userData {
		name: string,
		sex: string,
		identity: string,
		department: string,
    id?: number,
    image_url: string
	}

	const userData: userData = reactive({
		name: '',
		sex: '',
		identity: '',
		department: '',
    id: null,
    image_url: '',
	})

  // 获取公司名称
  const companyName = ref() 
	const returnCompanyName = async() => { 
		const res = await getCompanyName()
		companyName.value = res.data
	}
	returnCompanyName()

  const router = useRouter()
  // 常用管理跳转, 传入的参数是 'users_manage' ，那么跳转的路径就是 '/users_manage'
  const routerTo = (x:string) => { 
		router.push(`/${x}`);
  }

  // -----下面是echarts，需要用到数据（后端）-------
  onMounted(() => {
    manageUser()  // 产品类别图
    productCategoryBar()  // 产品类别图
		massageLevel()  // 公告等级分布图
		loginAllDay() // 每日登录
  })

  //  管理员与用户比值图 饼状图
  const manageUser = async() => {
    // 通过选择具有特定类名 .manage-user 的元素来初始化 Echarts 实例
    const mu = echarts.init(document.querySelector('.manage-user'))
		mu.showLoading() // 加载动画

		let res = await getAdminAndNumber()
		// console.log(res.data.data);
		mu.hideLoading() // 停止加载动画

    // 给选择到的元素设置一个名为 _echarts_instance_ 的属性，并将其值设置为空字符串 ''
    document.querySelector('.manage-user').setAttribute('_echarts_instance_', '')
    // 设置基本的参数
    mu.setOption({
      title: {
        text: '管理与用户对比图',
        left: 'center',
				padding: [10, 0, 0, 0]
      },
      tooltip: {
        trigger: 'item', // 设置提示框的触发方式为 “item”，这意味着当鼠标悬停在数据项上时显示提示框
      },
      legend: {
        orient: 'vertical', // 将图例的排列方向设置为垂直
        left: 'left',       // 将图例的位置设置在左侧
        padding: [20, 20, 20, 20] // 为图例设置内边距，分别为上、右、下、左四个方向的内边距值
      },
      series: [
        {
          // name: 'Access From',
          type: 'pie',  // 指定图表类型为 “pie”，即饼图
          radius: '55%',  // 设置饼图的半径大小为 “65%”
					// 使用外部定义的 piedata 作为饼图的数据
          data: res.data.data, 
          // 当鼠标悬停在数据项上时的样式设置，包括阴影的模糊度、偏移量和颜色
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
        }
      ]
    })
    // 用于echarts响应式, 添加了窗口大小调整的监听事件，当窗口大小改变时，调用 mu.resize() 方法来重新调整图表的大小，以保证图表的显示效果
    window.addEventListener('resize', function () {
      mu.resize()
    })
  }

  // 产品类别图 柱状图
	const productCategoryBar = async () => {
		const pcb = echarts.init(document.querySelector('.product-category-bar'))
		pcb.showLoading()
		let res = await getCategoryAndNumber()
		// console.log(res.data); 
		pcb.hideLoading()

		document.querySelector('.product-category-bar').setAttribute('_echarts_instance_', '')
			pcb.setOption({
				title: {
					text: "产品类别库存总价图",
					top: "3%",
					textStyle: {
						fontSize: 16
					},
				},
				tooltip: {
					trigger: 'axis',
				},
				xAxis: {
					type: 'category',
					data: res.data.category
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: res.data.price,
						type: 'bar',
						barWidth: 40,
						colorBy: "data"
					},
				]
			})
		window.addEventListener('resize', function () {
			pcb.resize()
		})
	}

	// 公告等级分布图 环形图
	const massageLevel = async () => {
		const ml = echarts.init(document.querySelector('.massage-level'))
		ml.showLoading()
		let res = await getLevelAndNumber()
		ml.hideLoading()

		document.querySelector('.massage-level').setAttribute('_echarts_instance_', '')
		ml.setOption({
			title: {
				text: "公告等级分布图",
				top: "3%",
				textStyle: {
					fontSize: 16
				},
			},
			tooltip: {
				trigger: 'item'
			},
			legend: {  // 图例
				top: '20%',
				left: 'left',  
				orient: 'vertical',
			},
			series: [{
				// name: 'Access From',
				type: 'pie',
				radius: ['35%', '65%'],
				avoidLabelOverlap: false,
				itemStyle: {
					borderRadius: 10,
					borderColor: '#fff',
					borderWidth: 2
				},
				label: {
					show: false,
					position: 'center'
				},
				emphasis: {
					label: {
						show: true,
						fontSize: 40,
						fontWeight: 'bold'
					}
				},
				labelLine: {
					show: false
				},
				data: res.data.data,
			}]
		})
		window.addEventListener('resize', function() {
			ml.resize()
		})
	}

	// 每日登录 折线图
	const loginAllDay = async() => {
		const mad = echarts.init(document.querySelector('.userlogin-week'))
		mad.showLoading()
		let res = await getDayAndNumber()
		mad.hideLoading()
		res.data.week.reverse()
		res.data.number.reverse()

		document.querySelector('.userlogin-week').setAttribute('_echarts_instance_', '')
			mad.setOption({
				title: {
					text: "每日登录人数图",
					top: "3%",
					textStyle: {
						fontSize: 16
					},
				},
				tooltip: {
					trigger: 'item'
				},
				xAxis: {
					type: 'category',
					data: res.data.week 
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{ 
						type: 'line',
						data: res.data.number,
					}
				]
			})
		window.addEventListener('resize', function () {
			mad.resize()
		})
	}

</script>
 
<style lang="scss" scoped>
	// 总览内容
	.overview-wrapped {
		padding: 8px;  // 8
		height: calc(100vh - 96px);
		background: #f8f8f8;

		// 上部分内容 个人资料 + 饼状图
		.top-content-wrapped {
			height: 30%;
			display: flex;

			// 个人信息
			.person-info {
				height: 100%;
				margin-right: 8px;
				width: calc(50% - 8px);
				display: flex;
				background: #fff;

				// 头像区域
				.person-avatar-wrapped {
					display: flex;
					width: 50%;
					height: 100%;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					// 公司
					.company {
						margin: 10px 0;
						font-size: 12px;
					}

					// 职务
					.department {
						margin-top: 8px;
						font-size: 12px;
					}

				}

				// 分割线
				.line-wrapped {
					height: 100%;
					display: flex;
					align-items: center;

					.line {
						height: 170px;
						border: 1px solid #D3D3D3;
					}
				}

				// 详细信息区域
				.detail-info-wrapped {
					height: 100%;
					width: calc(50% - 1px);
					margin-left: 50px;
					font-size: 12px;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
				}
			}

			// 饼状图
			.pie {
				width: calc(50%);
				height: 100%;
				background: #fff;
			}
		}

		// 中间部分内容 消息阅读量图 产品类别图
		.mid-content-wrapped {
			margin-top: 8px;
			height: calc(32% - 8px);
			display: flex;

			// 中间左部分
			.mid-content-left {
				margin-right: 8px;
				width: calc(60% - 8px);
				background: #fff;
			}

			// 中间右部分
			.mid-content-right {
				width: calc(40%);
				background: #fff;
				padding: 8px;

				// 标题
				.title {
					font-size: 14px;
					margin-bottom: 8px;
				}

				// 按钮区域
				.button-area {
					margin-bottom: 8px;  // 8
					height: 80px;  // 100
					width: 120px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					background: #F5F5F5;

					// 按钮名字
					.button-name {
						margin-top: 10px;
					}
				}

				// 按钮变色
				.button-area:hover {
					background: #e4efff;
				}
			}
		}

		// 底部内容
		.footer-content-wrapped {
			margin-top: 8px;
			height: calc(38% - 8px);
			display: flex;

			// 底部左部分
			.footer-content-left {
				margin-right: 8px;
				height: 100%;
				width: calc(30% - 8px);
				background: #fff;
			}

			// 底部右部分
			.footer-content-right {
				height: 100%;
				width: calc(70%);
				background: #fff;
			}
		}
	}
</style>